<template>
	<view class="content">
		<view style="width: 100%;height: 100vh;">
			<live-pusher id='livePusher' ref="livePusher" class="livePusher"
				:url="`rtmp://dx11.haoleen.com/videocall/${this.$store.state.user.user.id}`" mode="SD"
				:enable-mic="audio" :muted="mute" :enable-camera="video" :auto-focus="true" :beauty="1" whiteness="2"></live-pusher>
		</view>
		<!-- <cover-view
			style="position: fixed;z-index: 9999;top: 0rpx;left: 50rpx;">
			<bgyx-video :currentWebview="this.$scope.$getAppWebview()" :id="id" :name="$store.state.common.videocallinfo.friend_name"></bgyx-video>
		</cover-view> -->
		<cover-view
			style="position: fixed;z-index: 9999;top: 50rpx;right: 50rpx;">
			<video :src="`rtmp://dx11.haoleen.com/videocall/${id}`" style="width: 200rpx;position: fixed;z-index: 9999;height: 360rpx; top: 60rpx;right: 50rpx;" autoplay :show-play-btn="false" object-fit="fill"></video>
		</cover-view>
		<cover-view
			style="position: fixed;z-index: 9999;bottom: 150rpx;left: 0rpx;width: 100%;display: flex;justify-content: center;">
			<cover-image @click="changeaudio" :src="audio ? '/static/images/audioon.png' : '/static/images/audiooff.png'"
				style="width: 110rpx;height: 110rpx;margin-right: 120rpx;"></cover-image>
			<cover-image @click="close" src="/static/images/icon_guad.png"
				style="width: 120rpx;height: 120rpx;"></cover-image>
			<cover-image @click="changev" src="/static/images/qhvv.png"
				style="width: 110rpx;height: 110rpx;margin-left: 120rpx;"></cover-image>
		</cover-view>
	</view>
</template>

<script>
	// 这是用push组件做的 建议使用会议室的webrtc方式 更灵活 效果更好
	import {mapState} from 'vuex'
import utils from '../../../utils'
	export default {
		data() {
			return {
				context: null,
				audio: true,
				video: true,
				mute:false,
				id: 0,
				vtype: false
			}
		},
		computed:{
			...mapState({
				data:state=>{
					return state.common.videocallinfo
				}
			})
		},
		onUnload() {
			this.$store.commit(`common/setStatusState`, "normal")
		},
		onLoad({
			id
		}) {
			this.id = id
			
		},
		onReady() {
			// 注意：需要在onReady中 或 onLoad 延时
			this.context = uni.createLivePusherContext("livePusher", this);
			this.start()
		},
		methods: {
			changeaudio: function() {
				this.audio = !this.audio
				this.mute = !this.audio
			},
			changev: function() {
				this.vtype = !this.vtype
			},
			cesdataa: function(rtcdata) {
				console.log(`收到的信息`, rtcdata)
				setTimeout(() => {
					rtcdata.unpublish()
				}, 5000)
			},
			start: function() {
				this.context.start({
					success: (a) => {
						console.log("livePusher.start:" + JSON.stringify(a));
					}
				});
			},
			close: function() {
				this.context.stop({
					success: (a) => {
						console.log("livePusher.close:" + JSON.stringify(a));
						// uni.navigateBack()
					}
				});
				this.$socket.send({
					type:"hangoffvideocall",
					data:{
						friend_id:this.data.friend_id,
						friend_name:this.data.friend_name,
						friend_avatar:this.data.friend_avatar
					}
				})
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
	}

	.livePusher {
		width: 100%;
		height: 100vh;
	}
</style>